<template>
    <myDisplayWrap breadcrumbs="基础信息">
        <a-row class="userBox">
            <div class="titleBar">我的地址</div>
            <div class="addressRightContent">
                <div class="addaddressBtn">
                    <a-button class="" type="primary" @click="showModal">
                        新增收货地址
                    </a-button>
                    <a-input-search allow-clear v-model="pageInfo.addressInfo" placeholder="请输入关键字搜索收货地址"
                        style="width: 220px;float:right;margin-top:12px;margin-right:10px;" @search="searchAddress" />
                </div>
                <template v-if="addressMessage.length == 0">
                    <a-empty :image="simpleImage" style="margin-top: 70px" />
                </template>
                <template v-else>
                    <div>
                        <div v-for="item in addressMessage" :key="item.index" class="addressContent">
                            <a-card class="addressCard" :headStyle="{ color: 'rgba(50,50,50,1)' }">
                                <div slot="title">
                                    <img src="@/assets/images/supplierDisplayCenter/address.png" alt=""
                                        style="width:24px;height:24px;">
                                    {{ item.consigneeName }}
                                    <a-button v-if="item.isDefault == '1'" class="defaultaddressBtn">默认收货地址</a-button>
                                </div>
                                <a-button slot="extra" v-if="item.isDefault == '0' || !item.isDefault" type="link"
                                    @click="defaultaddress(item.id)">设为默认收货地址</a-button>
                                <a-button slot="extra" style="border: none;"
                                    @click="modificationaddress(item.id)">修改</a-button>
                                <a-button slot="extra" style="border: none;" @click="delectaddress(item.id)">删除</a-button>
                                <p>
                                    <span>收货人：</span>
                                    <span>{{ item.consigneeName }}</span>
                                </p>
                                <p>
                                    <span>所在地区：</span>
                                    <span>{{ item.areaName }}</span>
                                </p>
                                <p class="addressBeyond singleLineText">
                                    <span>详细地址：</span>
                                    <span :title="item.addr">{{ item.addr }}</span>
                                </p>
                                <p>
                                    <span>手机号：</span>
                                    <span>{{ item.mobile }}</span>
                                </p>
                                <p>
                                    <span>电子邮箱：</span>
                                    <span>{{ item.email }}</span>
                                </p>
                            </a-card>
                        </div>
                    </div>
                    <a-row style="margin-top:10px;">
                        <a-col :span="5">
                            <div>共 {{ total }} 条记录 第 {{ pageInfo.page }} / {{ Math.ceil(total / pageInfo.limit) }} 页</div>
                        </a-col>
                        <a-col :span="19">
                            <a-pagination style="float:right;" :current="pageInfo.page" :pageSizeOptions="pageSizeOptions"
                                :total="total" showSizeChanger showQuickJumper :pageSize="pageInfo.limit"
                                @showSizeChange="onShowSizeChange" @change="pageChange">
                                <template slot="buildOptionText" slot-scope="props">
                                    <span>{{ props.value }}条/页</span>
                                </template>
                            </a-pagination>
                        </a-col>
                    </a-row>
                </template>
            </div>

        </a-row>
        <a-modal :title=this.addressTitleData v-model="visible" @ok="addModification" :confirmLoading="confirmLoading"
            :headStyle="{ color: 'rgba(50,50,50,1)' }" centered width="800px" :destroyOnClose="true">
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                <a-form-item label="收货人">
                    <a-input v-decorator="['consigneeName', { rules: [{ required: true, message: '请填写收货人' }] }]"
                        placeholder="请填写收货人 " />
                </a-form-item>
                <a-form-item label="所在地区 ：">
                    <a-cascader :class="areaName != '请选择所在地区' ? 'area' : ''" :options="options" @change="onChange"
                        :loadData="loadData" changeOnSelect :placeholder="areaName"
                        v-decorator="['area', { rules: [{ required: areaTrue, message: '请填写所在地区' }, { validator: validatorIsLeaf }] }]" />
                </a-form-item>
                <a-input type='hidden' v-decorator="['areaName']" />
                <a-form-item label="详细地址：">
                    <a-input type='textarea' placeholder="请输入详细地址"
                        v-decorator="['addr', { rules: [{ required: true, message: '请填写详细地址' }] }]" />
                </a-form-item>
                <a-form-item label="手机号：">
                    <a-input placeholder="请输入手机号"
                        v-decorator="['mobile', { rules: [{ required: true, message: '请填写手机号' }, { pattern: /^1[3456789]\d{9}$/, message: '请填写正确的手机号码' }] }]" />
                </a-form-item>
                <a-form-item label="电子邮箱：">
                    <a-input placeholder="请输入电子邮箱"
                        v-decorator="['email', { rules: [{ validator: this.validators.validateEmail }] }]" />
                </a-form-item>
            </a-form>
            <template slot="footer">
                <a-row class="btnRow">
                    <a-button key="submit" type="primary" :loading="loading" @click="handleOk"
                        class="saveBtn primary_text_color">
                        <img src="@/assets/images/supplierDisplayCenter/savepop.png" alt="" class="saveImg">
                        保存
                    </a-button>
                    <a-button key="back" @click="handleCancel" class="cancelBtn">
                        <img src="@/assets/images/supplierDisplayCenter/cancelpop.png" alt="" class="cancelImg">
                        取消
                    </a-button>
                </a-row>
            </template>
        </a-modal>
        <a-modal :title=this.addressTitleData v-model="receiveVisible" @ok="addModification"
            :confirmLoading="confirmLoading" :headStyle="{ color: 'rgba(50,50,50,1)' }" centered width="800px"
            :destroyOnClose="true">
            <a-form :form="receiveForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                <a-form-item label="手机号：">
                    <a-input placeholder="请输入手机号" @blur="validMobileAndGetName"
                        v-decorator="['mobile', { rules: [{ required: true, message: '请填写手机号' }, { pattern: /^1[3456789]\d{9}$/, message: '请填写正确的手机号码' }] }]" />
                </a-form-item>
                <a-form-item label="收货人">
                    <a-input v-decorator="['consigneeName', { rules: [{ required: true, message: '请填写收货人' }] }]"
                        :disabled="true" placeholder="" />
                </a-form-item>
                <a-form-item label="所在地区 ：">
                    <a-cascader :class="areaName != '请选择所在地区' ? 'area' : ''" :options="options" @change="onChange"
                        :loadData="loadData" changeOnSelect :placeholder="areaName"
                        v-decorator="['area', { rules: [{ required: areaTrue, message: '请填写所在地区' }, { validator: validatorIsLeaf }] }]" />
                </a-form-item>
                <a-input type='hidden' v-decorator="['areaName']" />
                <a-form-item label="详细地址：">
                    <a-input type='textarea' placeholder="请输入详细地址"
                        v-decorator="['addr', { rules: [{ required: true, message: '请填写详细地址' }] }]" />
                </a-form-item>
                <a-form-item label="电子邮箱：">
                    <a-input placeholder="请输入电子邮箱"
                        v-decorator="['email', { rules: [{ validator: this.validators.validateEmail }] }]" />
                </a-form-item>
            </a-form>
            <template slot="footer">
                <a-row class="btnRow">
                    <a-button key="submit" type="primary" :loading="loading" @click="handleOk"
                        class="saveBtn primary_text_color">
                        <img src="@/assets/images/supplierDisplayCenter/savepop.png" alt="" class="saveImg">
                        保存
                    </a-button>
                    <a-button key="back" @click="handleCancel" class="cancelBtn">
                        <img src="@/assets/images/supplierDisplayCenter/cancelpop.png" alt="" class="cancelImg">
                        取消
                    </a-button>
                </a-row>
            </template>
        </a-modal>
    </myDisplayWrap>
</template>
  
<script>
import myDisplayWrap from './components/myDisplayWrap.vue'
import { Empty } from 'ant-design-vue';

export default {
    components: {
        myDisplayWrap
    },
    data() {
        return {
            pageSizeOptions: ['2', '4', '6', '8', '10'],
            total: '',//地址总数
            pageInfo: {
                limit: 2,
                page: 1,
                addressInfo: ''//搜索收货地址关键字
            },
            default: '',
            addressMessage: [],
            formLayout: 'horizontal',
            form: this.$form.createForm(this, { name: 'myaddress' }),
            ModalText: 'Content of the modal',
            visible: false,
            confirmLoading: false,
            loading: false,
            areaTrue: true,
            addressType: true,
            addressTitleData: '新增收货地址',
            options: [],
            areaId: 0,
            areaName: "",
            addressId: '',
            isPurchaserReceive: true, // 是否下单人确认收货
            receiveVisible: false,
            receiveForm: this.$form.createForm(this, { name: "receiveForm" })
        }
    },
    mounted() {

    },
    methods: {

        showModal() {
            if (this.isPurchaserReceive) {
                this.visible = true;
            } else {
                this.receiveVisible = true;
            }
            this.areaTrue = true;
            this.addressTitleData = '新增收货地址'
            this.areaName = "请选择所在地区";
            this.addressId = '';
            this.areaId = '';
        },
    },
    watch: {

    }
}
</script>
  
<style lang="scss" scoped>
.userBox {
    padding: 0 24px;
    border-left: 4px solid #cccccc54;
    margin-left: -1px;
    min-height: 650px;
}

.titleBar {
    width: 100%;
    height: 50px;
    line-height: 30px;
    padding: 10px;
    margin-bottom: 20px;
    background: #fff;
    border-bottom: 1px dashed #ccc;
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

.addressRightContent {
    //padding-bottom: 30px;

    &::-webkit-scrollbar {
        display: none;
    }
}

.myaddressRight {
    padding: 0 24px;
    border-left: 4px solid #cccccc54;
    margin-left: -1px;
    min-height: 650px;

    &::-webkit-scrollbar {
        display: none;
    }
}

.myaddressTitleDiv {
    width: 100%;
    height: 74px;
    background: #fff;
    line-height: 74px;
    border-bottom: 1px dashed #C7C7C7;
}

.myaddressTitle {
    font-size: 20px;
    color: #323232;
}

.addaddressBtn {
    width: 100%;
    height: 56px;
    background: #FAFAFA;
    line-height: 56px;
    padding-left: 16px;
}

.addressContent {
    height: 323px;
    background: #F0F2F5;
    margin-top: 16px;
    padding: 4px;
}

.addressCard {
    width: 100%;
    height: 100%;
    line-height: 40px;
}

.defaultaddressBtn {
    width: 112px;
    height: 26px;
    background: #FFF7E6;
    color: #FA8C16;
    border: 1px solid #FFC069;
    border-radius: 13px;
}

.addressTypeDiv {
    height: 80px;
    line-height: 56px;
    margin-left: 154px;
}

.addressTypeCommon {
    width: 146px;
}

.addressTypeDedicated {
    width: 146px;
    margin-left: 24px;
}

.pitchOn {
    background: rgba(242, 251, 255, 1);
}

.unselected {
    background: rgba(250, 250, 250, 1);
    color: #646464;
    border: 1px solid #E2E2E2;
}

.sendTicketsAddress {
    width: 200px;
    height: 80px;
    line-height: 80px;
    font-size: 16px;
    color: rgba(50, 50, 50, 1);
    margin: 0 auto;
}

.areaCode {
    width: 80px;
}

.phoneNumber {
    width: 160px;
}

.extensionNumber {
    width: 80px;
}

.btnRow {
    text-align: center;
}

.saveBtn {
    width: 80px;
    color: #FFFFFF;
}

.cancelBtn {
    width: 80px;
    background: #8C8C8C;
    color: #FFFFFF;
}

.saveImg {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    margin-bottom: 3px;
}

.cancelImg {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    margin-bottom: 3px;
}

.area .ant-cascader-input.ant-input::placeholder {
    color: rgba(0, 0, 0, 0.65);
    ;
}

.addressBeyond {
    width: 100%;
    height: 40px;
}
</style>
  